<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
<meta charset="UTF-8"></meta>
<title>Ajax 测试</title>
<link rel="stylesheet" type="text/css"
	th:href="@{/static/easyui/themes/default/easyui.css}"></link>
<link rel="stylesheet" type="text/css"
	th:href="@{/static/easyui/themes/icon.css}"></link>
<script th:src="@{/static/easyui/jquery.min.js}"></script>
<script th:src="@{/static/easyui/jquery.easyui.min.js}"></script>
<script th:src="@{/static/easyui/locale/easyui-lang-zh_CN.js}"></script>
</head>
<body class="easyui-layout">
	<div id="layout" th:replace="page :: layout"></div>
	<div style="text-align: center; padding: 5px 0"
		data-options="region:'center',title:' '">
		<div style="margin: 50px 0;"></div>

		<form id="ajaxTestForm">

			<input type="radio" name="type" value="GET" checked="checked" />GET<br />
			<input type="radio" name="type" value="POST" />POST<br /> 
			url:<input id="url" value="/spittlesrest/1" /><br /> 
			data:<input id="data" type="text" />


			<div style="text-align: center; padding: 5px 0">
				<a href="javascript:void(0)" class="easyui-linkbutton"
					onclick="ajaxTest()" style="padding: 5px 0px; width: 30%;"
					data-options="iconCls:'icon-ok'">开始</a>
			</div>
		</form>

		<div id="testResult"></div>

	</div>

	<script>
		$(document).ready(function() {
			//alert($("#type").val());
			//alert($("[name='type']").filter(":checked").val());
		});
		
		function ajaxTest(){
			var fields = $("#ajaxTestForm").serializeArray();
			var f = {};//声明一个对象
			$.each(fields,function(index,field){
				f[field.name] = field.value;//通过变量，将属性值，属性一起放到对象中
			})
			var str = JSON.stringify(f);
			//alert($("#data").val());
			///////////////////
			$.ajax({
				type : $("[name='type']").filter(":checked").val(),
				url : $("#url").val(),
				contentType : "application/json; charset=utf-8",
				data : JSON.stringify($("#data").val()),
				dataType : 'json',
				success : function(result) {
					$("#testResult").text(JSON.stringify(result));
				},
				error : function(error) {
					$("#testResult").text(JSON.stringify(error));
				}
			});
			/////////////////////
		}
	</script>
</body>
</html>